<template>
  <div class="option">
    <div class="money">
      <span class="txt">余额:</span>
      <span class="balance">
        {{ toThousands(balance) }}
      </span>
    </div>
    <div @click="openHandler">
      <img src="@/assets/img/game/custom.png" alt="custom" class="img" />
      <span>在线客服</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { usePcbjlStore } from '@/stores/pcbjl'
import { useGameStore } from '@/stores/game'
import { getCustomService } from '@/api'
import toThousands from '@/utils/formatNumber'
import { useUserStore } from '@/stores/user'

export default {
  methods: { toThousands },
  setup() {
    const pcbjlStore = usePcbjlStore()
    const gameStore = useGameStore()
    const userStore = useUserStore()
    const balance = computed(() => userStore.userInfo.balance)
    const currentGame = computed(() => gameStore.currentGame)
    const currentService = computed(
      () => serviceList.value.find((el) => el.dictCode === `CUSTOMER_SERVICE_${currentGame.value}`) ?? null,
    )
    // console.log('currentService', currentService)
    const setCsPopupStatus = pcbjlStore.setCsPopupStatus
    const serviceList = ref([])
    const gerUserInfo = async () => {
      try {
        const { data } = await getCustomService()
        serviceList.value = data
      } catch (e) {
        //
      }
    }
    onMounted(() => {
      gerUserInfo()
    })
    const openHandler = () => {
      const url = `https://t.me/` + currentService.value?.dictValue?.replace('@', '')
      // console.log(currentService.value.dictValue.replace('@', ''))
      window.open(url)
    }
    return { setCsPopupStatus, currentService, balance, openHandler }
  },
}
</script>

<style lang="less" scoped>
.option {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 12px;

  > a {
    display: flex;
    align-items: center;
    color: #fff;
  }

  > div {
    display: flex;
    align-items: center;

    &:nth-of-type(1) {
      margin-right: 9px;
    }
  }
}

.img {
  display: block;
  height: 18px;
  width: auto;
  margin-right: 4px;
}
.money {
  .balance {
    font-family: 'DIN', serif;
    font-weight: 500;
    font-size: 14px;
  }
}
</style>
